<template>
  <div id="stopdialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :isshowconfirmbtn="false"
      :dialogWidth="'40%'"
      :enterTitle="false"
      :isshowimportTitle="false"
      :dialogTitle="`复训补交-${dialogparams.name}`"
      @closetextDialog="closetextDialog"
      @confirmbtn='confirmbtn'
      :topHeight='"22vh"'
      :isabledconfirm='isabled'
    >
    <!-- 表单区域 -->
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
      <el-form-item label-width="20" prop="cost_subject" label="复训原因">
        <el-radio-group v-model="formData.cost_subject" size="medium">
          <el-radio v-for="(item, index) in field101Options" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="交费金额" prop="cost_money">
          <el-input @input='paypeice' v-model="formData.cost_money" placeholder="请输入交费金额" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
     <el-form-item label="费用信息" prop="priceinfo">
       <ul class="moneylist" >
         <li>
           <span>标准：{{formData.cost_money||0}}元</span>
         </li>
         <li>
           <span style="color:rgb(71, 98, 254);">实收：{{officialprice||0}}元</span>
         </li>
       </ul>
     </el-form-item>
     <el-form-item label="支付方式" prop="pay_typeprice">
       <div class="paytypearea">

         <el-input
          v-for="(item,index) in pay_typeOption"
          :key="index"
           v-model="paytypeprice[item.alias]"
           class="payTypeinput"
           placeholder="金额"
           :disabled="isdisablepay"
           :style="{ width: '20%' }"
           @input="paypriceinput"
         >
           <template slot="prepend">{{item.title}}</template>
         </el-input>
       </div>
     </el-form-item>
     <el-form-item label="支付时间" prop="cost_time">
       <el-date-picker v-model="formData.cost_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
         :style="{width: '100%'}" placeholder="请选择支付时间" clearable></el-date-picker>
     </el-form-item>
</el-form>

    </commonformdialog>
  </div>
</template>

<script>
//引入弹窗
import commonformdialog from '@/components/commondialog/commondialog'
import { getSessionStorage } from '@/utils/accessToken'
//utils
import {isObjectvalue} from '@/utils'
//api
import {reCharge} from '@/api/student'
export default {
  data() {
    //支付方式验证
    var validatepay = (rule, value, callback) => {
       if(!isObjectvalue(this.paytypeprice)){
         callback(new Error('请输入支付方式'));
       }else{
         callback()
       }
      };
    var priceinfo = (rule, value, callback)=>{
       callback()
    }
    return {
      //是否禁用输入支付方式
      isdisablepay:false,
      //是否禁用确认按钮
      isabled:true,
      //支付方式
      paytypeprice: {
        wechat: '',
        alipay:'',
        money:'',
        pos:'',
        other:'',
        transfer:''
      },
      formData: {
        cost_subject: '',
        cost_money:'',
        cost_time:''
      },
      rules: {
        cost_time:[
          {
            required: true,
            message: '请输入支付时间',
            trigger: 'change'
          }
        ],
        cost_subject: [{
          required: true,
          message: '请至少选择一个原因',
          trigger: 'change'
        }],
        cost_money:[
          {
            required: true,
            message: '请输入交费金额',
            trigger: 'change'
          }
        ],
        pay_typeprice:[
           {
             required: true,
             validator: validatepay,
             trigger: 'change'
          }
        ],
        priceinfo:[
          {
             required: true,
             validator: priceinfo,
             trigger: 'change'
          }
        ]
      },
      field101Options: [{
        "label": "科二考试未通过",
        "value": 2
      }, {
        "label": "科三考试未通过",
        "value": 3
      }, {
        "label": "其他",
        "value": 5
      }],
      pay_typeOption:[]
    }
  },
  components: {
    commonformdialog,
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
    },
//弹窗参数
    dialogparams:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  methods:{
    //监听交费金额
    paypeice(val){
        this.paytypeprice={
          wechat: '',
          alipay:'',
          money:'',
          pos:'',
          other:'',
          transfer:''
        }
        this.isdisablepay = false
    },
    paypriceinput(e){
      if(this.officialprice>this.formData.cost_money){
         this.$message.info('输入的金额不能大于交费金额！')
         this.paytypeprice={
        wechat: '',
        alipay:'',
        money:'',
        pos:'',
        other:'',
        transfer:''
      }
         this.isdisablepay = false
      }else if(this.officialprice==this.formData.cost_money){
        this.isdisablepay = true
        this.isabled = false
      }
    },
      //关闭弹窗
    closetextDialog() {
      this.$refs['elForm'].resetFields()
      this.$emit('closetextDialog')
      this.paytypeprice = {
        wechat: '',
        alipay:'',
        money:'',
        pos:'',
        other:'',
        transfer:''
      }
      //开启支付
      this.isdisablepay = false
    },
    //点击确认
    confirmbtn(){
        this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        let params = {
          student_id:this.dialogparams.id,
          cost_type:5,
          cost_subject:this.formData.cost_subject,
          cost_money:this.formData.cost_money,
          pay_type:this.paytypeprice,
          cost_time:this.formData.cost_time,
          _request:6
        }
        let data = await reCharge(params)
        if(data.code=='0000'){
          this.$message.success('复训补交成功！')
          this.$emit('confirmdrill')
          this.$refs['elForm'].resetFields()
        }

      })
    }
  },
  mounted() {
    //交费方式
    this.pay_typeOption = getSessionStorage('Options')[15]
  },
  computed:{
    //计算实收金额
    officialprice(){
      let paypreic = Object.values(this.paytypeprice);
      let total = 0;
      paypreic.forEach((item,index)=>{
        total+= Number(item)
      })
      // if(total>=this.formData.field102){
      //   total = this.formData.field102
      // }
      return total
    }
  }
}
</script>

<style scoped lang='scss'>
  ::v-deep {
    .paytypearea .el-input__inner {
      padding-right: 15px !important;
      width: 81px;
    }
    .el-input-group__append {
      color: #999 !important;
    }
    .el-input-group__prepend {
      background-color: #f5f7fa;
      color: #909399 !important;
      vertical-align: middle;
      display: table-cell;
      position: relative;
      padding: 0 9px !important ;
      width: 1px;
      white-space: nowrap;
    }
  }
.moneylist {
  // margin: 5px 0 20px 0;
  display: flex;
  // margin-left: 20px;
  li {
    margin-right: 30px;
  }
}
.payTypeinput {
  padding: 0 !important;
  margin-right: 10px;
  width:40px !important;
  margin-bottom: 20px;
  &:last-child{
    margin-bottom: 0;
  }
}
</style>
